<template>
	<view class="allView">
		<view class="viewText">
			<text decode class="viewTitle">{{ item.title }}</text>
			<text decode class="viewContent">{{ getAbstract }}</text>
			<view class="viewBoard">
				<!-- <text>图片解答</text> -->
				<u-parse :html="getImg"></u-parse>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				item:{}
			}
		},
		computed:{
			getAbstract(){
				const reg = /<[^>]+>/gi; //筛选标签
				if(this.item.content)
					return this.item.content.split(reg)
					?.filter(item => (item !== '')&&(item !== '\n')).join('');
				else return this.item.content;
			},
			getImg(){
				const reg = /<img\s+[^>]*>\s*/gi; //筛选标签
				if(this.item.content)
				// console.log(this.item.content,)
				return this.item.content.match(reg)
					?.filter(item => (item !== '')).join('');
					else return this.item.content;
			}
		},
		async onLoad(options) {
			let res = await this.$api.queryProblemById({id:options.id});
			if(!res?.success){
				this.$refs.uToast.show({type:'error',title: "数据获取失败!"});
			}else{
				this.item = res.result;
			}
		}
	}
</script>

<style>
	page{
		background-color: #f1f1f1;
	}
</style>

<style scoped lang="scss">
	.viewBoard{
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.viewContent{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		margin-top: 16rpx;
		line-height: 32rpx;
	}
	.viewTitle {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: rgba(0,0,0,0.8);
	}

	.viewText {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.allView {
		margin-top: 30rpx;
		margin-left: 32rpx;
		margin-right: 34rpx;

	}
</style>